<template>
	<div class="adm-page home-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="scroll home-ht">
			<div class="container">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="h-panel h-height">
							<div class="h-panel-hd">
								<div class="h-tit">执法方案</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu1" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-height">
							<div class="h-panel-hd">
								<div class="h-tit">法制办案</div>
								<el-link class="h-more" type="primary">查看更多<i class="el-icon-caret-right"></i></el-link>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu2" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-height">
							<div class="h-panel-hd">
								<div class="h-tit">卷宗管理</div>
								<el-link class="h-more" type="primary">查看更多<i class="el-icon-caret-right"></i></el-link>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu3" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-height">
							<div class="h-panel-hd">
								<div class="h-tit">执法监督</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu4" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
											<span class="badge" v-if="item.badge">{{item.badge}}</span>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-md-height">
							<div class="h-panel-hd">
								<div class="h-tit">学习培训</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu5" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-md-height">
							<div class="h-panel-hd">
								<div class="h-tit">辅助办案</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu6" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-md-height">
							<div class="h-panel-hd">
								<div class="h-tit">统计分析</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu7" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="h-panel h-md-height">
							<div class="h-panel-hd">
								<div class="h-tit">系统管理</div>
							</div>
							<div class="h-panel-bd">
								<ul class="h-menus">
									<li v-for="item in menu8" :key="item">
										<router-link class="h-menu-box" :to="item.url">
											<img :src="item.icon" alt="">
											<p>{{item.text}}</p>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return{
				menu1:[
					{
						icon: require('../../assets/images/icon/a1.png'),
						text: "警情处置",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a2.png'),
						text: "盘查",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a3.png'),
						text: "案件调查",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a4.png'),
						text: "行政案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a5.png'),
						text: "刑事案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a6.png'),
						text: "涉案财物管理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a7.png'),
						text: "音视频管理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a8.png'),
						text: "空白文书打印",
						url:'/'
					},
				],
				menu2:[
					{
						icon: require('../../assets/images/icon/b1.png'),
						text: "行政复议案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/b2.png'),
						text: "刑事复议案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/b3.png'),
						text: "刑事复核案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/b4.png'),
						text: "国家赔偿案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/b5.png'),
						text: "执法监督案件办理",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/b6.png'),
						text: "执法过错案件办理",
						url:'/'
					},
				],
				menu3:[
					{
						icon: require('../../assets/images/icon/c1.png'),
						text: "警情档案",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c2.png'),
						text: "行政案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c3.png'),
						text: "行政复议案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c4.png'),
						text: "刑事案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c5.png'),
						text: "刑事复议案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/a6.png'),
						text: "刑事复核案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c7.png'),
						text: "国家赔偿案卷",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c8.png'),
						text: "卷执法监督案",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/c9.png'),
						text: "执法过错案卷",
						url:'/'
					},
				],
				menu4:[
					{
						icon: require('../../assets/images/icon/d1.png'),
						text: "案件提醒",
						url:'/',
						badge:'3',
					},
					{
						icon: require('../../assets/images/icon/d2.png'),
						text: "案件预警",
						url:'/',
						badge:'3',
					},
					{
						icon: require('../../assets/images/icon/d3.png'),
						text: "案件超期",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/d4.png'),
						text: "案件违法",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/d5.png'),
						text: "案件审批(民警)",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/d6.png'),
						text: "案件审批(领导)",
						url:'/',
						badge:'3',
					},
					{
						icon: require('../../assets/images/icon/d7.png'),
						text: "执法通知",
						url:'/',
						badge:'3',
					},
					{
						icon: require('../../assets/images/icon/d8.png'),
						text: "执法通报",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/d9.png'),
						text: "执法考评",
						url:'/'
					},
				],
				menu5:[
					{
						icon: require('../../assets/images/icon/e1.png'),
						text: "学习资讯",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/e2.png'),
						text: "知识测试",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/e3.png'),
						text: "模拟答题",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/e4.png'),
						text: "成绩查看",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/e5.png'),
						text: "题库录入",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/e6.png'),
						text: "法律法规",
						url:'/'
					},
				],
				menu6:[
					{
						icon: require('../../assets/images/icon/f1.png'),
						text: "XX系统",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/f2.png'),
						text: "XX系统",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/f3.png'),
						text: "XX系统",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/f4.png'),
						text: "XX系统",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/f5.png'),
						text: "XX系统",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/f6.png'),
						text: "XX系统",
						url:'/'
					},
				],
				menu7:[
					{
						icon: require('../../assets/images/icon/j1.png'),
						text: "警情分析",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/j2.png'),
						text: "案件分析",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/j3.png'),
						text: "大屏演示",
						url:'/'
					},
				],
				menu8:[
					{
						icon: require('../../assets/images/icon/h1.png'),
						text: "组织机构",
						url:'/'
					},
					{
						icon: require('../../assets/images/icon/h2.png'),
						text: "通讯录",
						url:'/'
					},
				],
				bg:require('../../assets/images/bg.jpg'),
				skin:"skin1"
			}
		},
		methods: {
			getData(data) {
				console.log(data)
				if(data ==1){
					this.bg = require('../../assets/images/bg.jpg')
					this.skin = "skin1"
				}else if(data == 2){
					this.skin = "skin2"
					this.bg = require('../../assets/images/bg3.png')
				}else{
					this.skin = "skin3"
					this.bg = require('../../assets/images/bg2.png')
				}
			}
		}
	}
</script>
